<template>
	<div style="100vh">
		<div style="background-color: #000000;height: 80px;display: flex;">
			<h3 style="color: #13CE66;">电影管理系统</h3>
			<h3 style="color: white;margin-left: 100px;">欢迎进入电源管理系统网站&nbsp;&nbsp;&nbsp;&nbsp;登录时间：xxxxxxx</h3>
			<div style="margin-top: 16px; margin-left: 1000px;">
				<el-avatar src="https://pic4.zhimg.com/v2-753e552c989fd42991172eb43822555f_r.jpg"></el-avatar>
				<span style="color: #ffffff;">海绵宝宝</span>
			</div>

			<h3 style="color: white;margin-left: 50px;">首页</h3>


		</div>
		<div style="display: flex;">
			<div style="width: 15%;">
				<el-col :span="20">
					<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
						background-color="#545c64" text-color="#ffffff">
						<el-menu-item>
							<span slot="title">
								管理员设置
							</span>
						</el-menu-item>
						<el-menu-item>
							<span slot="title">
								管理员列表
							</span>
						</el-menu-item>
						<el-menu-item>
							<span slot="title">
								角色列表
							</span>
						</el-menu-item>
						<el-menu-item>
							<span slot="title">
								电影管理
							</span>
						</el-menu-item>
						<el-menu-item>
							<span slot="title">
								电影类型
							</span>
						</el-menu-item>
						<el-menu-item>
							<span slot="title">
								所属国家地区
							</span>
						</el-menu-item>
						<el-menu-item>
							<span slot="title">
								电影列表
							</span>
						</el-menu-item>
						<el-menu-item>
							<span slot="title">
								网站首页
							</span>
						</el-menu-item>
					</el-menu>
				</el-col>
				</el-row>
			</div>
			<div style="width: 170vh;">
				<div style="display: flex;justify-content: space-between;height: 50px;">
					<p>管理员设置——角色列表</p>
					<el-button type="primary" style="background-color: #13ce66;border: none;">
						<i class="el-icon-refresh-right"></i>
					</el-button>
				</div>
				<hr>
				<el-button style="background-color: #13CE66;border: none;width: 100px;height: 50px;color: white;">添加角色</el-button>
					
				<div>
					<el-table :data="adm" style="width: 100% " height="300">
						<el-table-column prop="id" label="序号" width="180">
						</el-table-column>
						<el-table-column prop="name" label="角色名称" width="180">
						</el-table-column>
						<el-table-column prop="num" label="操作数量 " width="180">
						</el-table-column>


						<el-table-column prop="state" label="状态" width="180">
							<el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949">
							</el-switch>
						</el-table-column>
						<el-table-column label="管理" width="170">
							<template slot-scope="scope">
								<el-button type="primary">编辑</el-button>
								<el-button type="danger">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>


		</div>

		<div>
			<table></table>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'Aaa',
		data() {
			return {
				adm: [{
						id: 20231205,
						name: '蔡徐坤',
						num: 10
					},
					{
						id: 20231206,
						name: '陈立农',
						num: 10
					},
					{
						id: 20231207,
						name: '范丞丞',
						num: 10
					},
					{
						id: 20231208,
						name: '及太慢',
						num: 10
					}
				],
			}
		}
	}
</script>

<style>
</style>
